<script setup lang="ts">
import {
  ElRow,
  ElCol,
  ElInput,
  ElButton,
  ElMessage,
  ElCard,
} from "element-plus";
import { ElRadioGroup, ElRadio, ElRadioButton, ElTooltip } from "element-plus";
import { ref, onMounted, onUnmounted, watch } from "vue";
import "codemirror/mode/javascript/javascript.js";
import type { CmComponentRef } from "codemirror-editor-vue3";
import { DocumentEditor } from "@onlyoffice/document-editor-vue";
const scriptUrl = defineModel("scriptUrl");
const demoFileUrl = defineModel("demoFileUrl");
const demoConfigType = defineModel("demoConfigType");
const demoConfigMode = defineModel("demoConfigMode");
interface Props {
  scriptUrl?: string;
}

defineOptions({
  name: "ParagraphLock",
});

const props = withDefaults(defineProps<Props>(), {});

const getUuid = function () {
  return "xxxxxxxxxxxxxxxxxxxxxx".replace(/[xy]/g, function (c) {
    var r = (Math.random() * 16) | 0,
      v = c == "x" ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
};

const VITE_ONLY_OFFICE_BASE_URL = import.meta.env.VITE_ONLY_OFFICE_BASE_URL;
const url = ref("http://47.94.91.67/demo_file/demo.docx");
const containerRef = ref();
const cmRef = ref<CmComponentRef>();

let containerWidth = 0;
let containerHeight = 0;
let documentEditorKey = ref("");
onMounted(() => {
  containerWidth = containerRef.value.parentNode.offsetWidth;
  containerHeight = containerRef.value.parentNode.offsetHeight;
  if (containerHeight > 800) {
    // containerHeight = 800;
  }
  // containerRef.value.style.height = containerHeight + "px";
  containerRef.value.style.height = "calc(100vh - 88px)";
  setTimeout(() => {
    cmRef.value?.resize("100%", containerHeight);
  }, 1000);
  documentEditorKey.value = getUuid();
});

onUnmounted(() => { });

watch(demoFileUrl, async (newsDemoFileUrl, oldDemoFileUrl) => { });

let currentConnector = null;
const onDocumentReady = () => {
  console.log("onDocumentReady");
  currentConnector = DocEditor.instances.docEditor.createConnector();
  window.connector = currentConnector;
  getParagraphBlock();
};

var config = ref({
  type: "desktop",
  // "type": "mobile",
  documentType: "word",
  historyList: {
    history: [],
    currentVersion: "1",
  },
  document: {
    title: "通用模板.docx",
    // url: "https://d2nlctn12v279m.cloudfront.net/assets/docs/samples/zh/demo.docx",
    url: "",
    permissions: {
      print: true,
      download: true,
      edit: true,
    },
    fileType: "docx",
    key: getUuid(),
  },
  editorConfig: {
    customization: {
      autosave: false,
      compactToolbar: false,
      forcesave: true,
      toolbarNoTabs: true,
      help: false,
      compactHeader: false,
      hideRightMenu: true,
      plugins: true,
      uiTheme: "theme-light",
    },
    mode: "edit",
    callbackUrl:
      "https://api.docs.onlyoffice.com/dummyCallback",
    lang: "zh-CN",
    user: {
      name: "曹瑞剑雄",
      id: "104",
    },
  },
});

const init = function () {
  config.value.document.key = getUuid();
  config.value.document.url = demoFileUrl.value;
  config.value.document.type = demoConfigType.value;
  config.value.editorConfig.mode = demoConfigMode.value;
  documentEditorKey.value = config.value.document.key;
};


const pageMap = ref({});

let getParagraphBlock = function () {
  currentConnector.callCommand(
    function () {
      var oDocument = Api.GetDocument();
      var resultList = oDocument.GetAllParagraphs2();
      return resultList;
    },
    function (data) {
      initParagraphBlock(data);
    });
};

/**
 * 1：可编辑
 * 3：锁定
 */
let lockType = {
  none: "1",
  lock: "3",
};

let initParagraphBlock = function (data) {
  var pageParagraphMap = {};
  for (var i = 0; i < data.length; i++) {
    var paragraph = data[i];
    if (paragraph.text == "") {
      paragraph.lock.type = lockType.lock;
    }
    if (pageParagraphMap[paragraph.pageNum] == undefined) {
      pageParagraphMap[paragraph.pageNum] = [];
    }
    pageParagraphMap[paragraph.pageNum].push(paragraph);
  }
  pageMap.value = pageParagraphMap;
};

let setLock = function (paragraph) {
  var id = paragraph.id;
  var lockTye = paragraph.lock.type;
  Asc.scope = {
    id: id,
    lockTye: lockTye,
  };
  currentConnector.callCommand(
    function () {
      var id = Asc.scope.id;
      var lockTye = parseInt(Asc.scope.lockTye);
      var oDocument = Api.GetDocument();
      oDocument.LockParagraph(id, lockTye);
    },
    function () { }
  );
};

init();
</script>

<template>
  <di class="onlyoffice_demo_container" ref="containerRef">
    <el-row>
      <el-col :span="9">
        <div style="
            width: 100%;
            height: calc(100vh - 88px);
            overflow: scroll;
            background: #ffffff;
          ">
          <el-button style="width: 100%" type="danger" @click="getParagraphBlock">更新权限</el-button>
          <el-card shadow="always" v-for="(item, index) in pageMap">
            <template #header>
              <div class="card-header">
                <span>第 {{ parseInt(index) + 1 }} 页</span>
              </div>
            </template>
            <div class="mb-2 ml-4" v-for="paragraph in item">
              <div class="mb-2 ml-4" v-if="paragraph.text.trim() != ''">
                <el-radio-group v-model="paragraph.lock.type" size="small" @change="setLock(paragraph)">
                  <el-radio-button value="1" label="可编辑"></el-radio-button>
                  <!-- <el-tooltip class="box-item" effect="dark" content="可编辑不可删除" placement="top">
                    <el-radio-button value="2" label="可编辑"></el-radio-button>
                  </el-tooltip> -->
                  <el-tooltip class="box-item" effect="dark" content="不可编辑不可删除" placement="top">
                    <el-radio-button value="3" label="锁定"></el-radio-button>
                  </el-tooltip>
                </el-radio-group>
                <p>{{ paragraph.text }}</p>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="15">
        <DocumentEditor v-if="demoFileUrl && config.document.url" id="docEditor"
          :documentServerUrl="VITE_ONLY_OFFICE_BASE_URL" :config="config" :events_onDocumentReady="onDocumentReady"
          height="100%" />
      </el-col>
    </el-row>
  </di>
</template>

<style scoped>
.onlyoffice_demo_container {
  width: 100%;
  height: 100%;
  display: inline-block;
}
</style>
